<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<title>크기 변경</title>
<meta name="class-lists" content="jindo.Transition"/>
<meta name="screenshots" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="크기를 변경하는 예제입니다.">
<link rel="stylesheet" type="text/css" href="../asset/demo.css">
<style type="text/css">
	#rect {
		position:absolute; width:100px; height:100px; left:10px; top:10px; padding:10px;
		background-color:#0075c8; color:#fff;
		font-weight:bold;
		font-size:1.5em;
		cursor:pointer;
	}
	
	label {
		font-size : 13px;
	}
	
	table { margin-left : 130px;}
	
	tr th {
		padding : 10px;
		border-top:1px solid #999;
		border-bottom:1px solid #999;
	}
	tr td {
		padding : 10px;
		border-bottom:1px solid #ccc;
	}
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>
	
<div class="demo">
	<table cellpadding="0" cellspacing="0">
		<tr>
			<th>CSS</th>
			<th>Value</th>
			<th>FPS</th>
			<th>Duration</th>
			<th>jindo.Effect</th>
		</tr>
		<tr>
			<td>
				height
			</td>
			<td>
				<input id="targetValue" size="2" type="text" value="200">			
			</td>
			<td>
				<input id="fps" size="2" type="text" value="30">			
			</td>
			<td>
				<input id="duration" size="4" type="text" value="1000">			
			</td>
			<td>
				<select id="selectEffect">
					<option value="linear">linear</option>
					<option value="easeIn">easeIn</option>
					<option value="easeOut">easeOut</option>
					<option value="easeInOut">easeInOut</option>
					<option value="easeOutIn">easeOutIn</option>
					<option value="bounce">bounce</option>
					<option value="overphase">overphase</option>
					<option value="cubicEase">cubicEase</option>
					<option value="cubicEaseIn">cubicEaseIn</option>
					<option value="cubicEaseOut">cubicEaseOut</option>
					<option value="cubicEaseInOut">cubicEaseInOut</option>
					<option value="cubicEaseOutIn">cubicEaseOutIn</option>
				</select>				
			</td>
		</tr>
	</table>
	
	<div id="rect">click me</div>
</div>

<script type="text/javascript" charset="utf-8" src="../../asset/jindo.desktop.all.ns.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Component.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Effect.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Timer.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Transition.js"></script>
<script type="text/javascript">
var oTransition = new jindo.Transition();

	jindo.$Fn(function(weEvent) {
		var sEffect = jindo.$("selectEffect").value;
		var nValue = jindo.$("targetValue").value;
		
		oTransition.fps(jindo.$("fps").value).abort().queue(jindo.$("duration").value,
			jindo.$('rect'), {
				'@height' : jindo.Effect[sEffect]("100px", nValue + "px")
			}
		).sleep(500).queue(function(){
			jindo.$Element('rect').css("height", "100px");
		}).start();
	}).attach(jindo.$("rect"), "click");
</script>
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>